<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字人视频编辑 - 数字人克隆系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="#(CPATH)/aiv/css/add-small.css" rel="stylesheet">
</head>
<body>
<div class="container container-main">
    <!-- 顶部标题 -->
    <div class="text-center mb-4">
        <h1 class="display-5 fw-bold text-primary">
            <i class="fas fa-video me-2"></i>数字人设置
        </h1>
        <p class="lead text-muted">高效设置您的数字人视频资源</p>
    </div>

    <!-- 表单卡片 -->
    <div class="card card-shadow">
        <div class="card-header bg-white">
            <h3 class="section-header mb-0">
                <div class="d-flex align-items-center">
                    <div class="form-icon">
                        <i class="fas fa-edit"></i>
                    </div>
                    <div>
                        <i class="fas fa-user-tie text-primary me-2"></i>#(video.id != null ? '编辑' : '创建')讲解人视频
                        <div class="text-muted mt-1" style="font-size: 0.95rem; font-weight: normal;">
                            #(video.id != null ? '编辑' : '创建')的数字人配置
                        </div>
                    </div>
                </div>
            </h3>
        </div>

        <div class="card-body">
            <form action="/plVideo/#(video.id != null ? 'update' : 'save')" method="post">
                <input type="hidden" name="video.id" value="#(video.id)">

                <!-- 视频选择 -->
                <div class="mb-4">
                    <label class="form-label">视频 <span class="required-star">*</span></label>
                    <select class="form-select" name="video.video_id" required>
                        <option value="">-- 请选择视频 --</option>
                        #for(res : resourceList)
                        <option value="#(res.id)" #(res.id == video.video_id ? 'selected' : '')>#(res.name)</option>
                        #end
                    </select>
                    <div class="form-text">选择要关联的视频资源</div>
                </div>

                <div class="row g-3 mb-4">
                    <!-- 类型选择 -->
                    <div class="col-md-4">
                        <label class="form-label">类型 <span class="required-star">*</span></label>
                        <select class="form-select" name="video.type" required>
                            <option value="1" selected>默认</option>
                        </select>
                    </div>

                    <!-- 状态选择 -->
                    <div class="col-md-4">
                        <label class="form-label">状态 <span class="required-star">*</span></label>
                        <select class="form-select" name="video.state" required>
                            <option value="Y" #(video.state == 'Y' ? 'selected' : '')>启用</option>
                            <option value="N" #(video.state == 'N' ? 'selected' : '')>停用</option>
                        </select>
                    </div>

                    <!-- 概率设置 -->
                    <div class="col-md-4">
                        <label class="form-label">概率 (1-10)</label>
                        <input type="number" class="form-control" name="video.odds"
                               min="1" max="10" value="#(video.odds)" required>
                        <div class="form-text">数值越高，出现概率越大</div>
                    </div>
                </div>

                <!-- 描述说明 -->
                <div class="mb-3">
                    <label class="form-label">描述说明</label>
                    <textarea class="form-control" name="video.description" rows="3">#(video.description ??)</textarea>
                </div>

                <!-- 预览状态 -->
                <div class="alert alert-light border mt-4">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-info-circle text-primary me-2"></i>
                        </div>
                        <div class="flex-grow-1 ms-2">
                            <h6 class="mb-1">当前配置预览</h6>
                            <div class="d-flex flex-wrap gap-2 mt-2">
                                <span class="badge bg-info">默认</span>
                                <span class="status-badge text-white #(video.state == 'Y' ? 'bg-success' : 'bg-secondary') ">#(video.state == 'Y' ? '启动' : '停用')</span>
                                <span class="badge bg-light text-dark border">概率: #(video.odds)</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 表单操作按钮 -->
                <div class="form-footer">
                    <button type="submit" class="btn btn-primary btn-action">
                        <i class="fas fa-save me-2"></i>#(video.id != null ? '保存修改' : '创建视频')
                    </button>
                    <a href="/plVideo" class="btn btn-outline-secondary btn-action">
                        <i class="fas fa-list me-2"></i>返回列表
                    </a>
                    <button type="button" class="btn btn-light ms-auto">
                        <i class="fas fa-trash-alt me-2"></i>删除配置
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 信息提示 -->
    <div class="alert alert-info mt-4">
        <div class="d-flex align-items-center">
            <i class="fas fa-lightbulb me-3 fs-4 text-info"></i>
            <div>
                <strong>操作提示：</strong> 概率值范围1-10，数值越大表示该视频出现的概率越高。建议同类型的多个视频概率总和不超过10。
            </div>
        </div>
    </div>
</div>

<!-- 引入Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>

<script>
    // 表单提交验证
    document.querySelector('form').addEventListener('submit', function(e) {
        const odds = document.querySelector('input[name="video.odds"]');
        if (odds.value < 1 || odds.value > 10) {
            alert('概率值必须在1-10之间');
            odds.focus();
            e.preventDefault();
        }
    });

    // 删除按钮功能
    document.querySelector('.btn-light').addEventListener('click', function() {
        if (confirm('确定要删除此视频配置吗？此操作不可恢复！')) {
            alert('视频配置已删除');
            window.location.href = '/plVideo';
        }
    });
</script>
</body>
</html>